<template>
<div class="pad10 bcf round3 ">
  <div id="order" class="pad5 lh2">
    <div class="flrc bdbso fwb" v-if="order">
      <div class="fs12">物业缴费单</div>
      <div class="flex1 tar">{{order.sn}}</div>
    </div>
    <div class="bdbso flrc">
      <div class="flex1" v-if="order.payType">支付方式：{{order.payType.name}}</div>
      <div class="flex1">总费用：{{order.amount.toFixed(2)}}</div>
      <div class="flex1">减免费用：{{order.cut.toFixed(2)}}</div>
      <div class="flex1">实缴：{{(order.amount - order.cut).toFixed(2)}}</div>
      <div class="flex1">制单时间：{{$utils.str2date(order.createAt)}}</div>
    </div>
    <div class="lh2" v-if="order">
      <div class="flrc bdbso bdw3 bdc11">
        <div class="flex6">费用名称</div>
        <div class="flex1">面积</div>
        <div class="flex2">费用</div>
        <div class="flex2">小区</div>
        <div class="flex3">楼栋号</div>
        <div class="flex2">开始时间</div>
        <div class="flex2">截止时间</div>
        <div class="flex4">备注</div>
      </div>
      <div class="flrc bdbda bdc11" v-for="(item,index) in order.bills" :key="index">
        <div class="flex6">{{item.name}}</div>
        <div class="flex1" v-if="item.house">{{item.house.area}}</div>
        <div class="flex2">{{item.amount.toFixed(2)}}</div>
        <div class="flex2" v-if="item.house && item.house.community">{{item.house.community.name}}</div>
        <div class="flex3" v-if="item.house">{{item.house.name}}</div>
        <div class="flex2">{{$utils.str2date(item.startAt)}}</div>
        <div class="flex2">{{$utils.str2date(item.endAt)}}</div>
        <div class="flex4">{{item.p}}</div>
      </div>
    </div>
  </div>
  <div class="pad10 tac">
    <mu-button ref="printBtn" color="primary" v-print="'#order'" flat>
      <mu-icon left value="print"></mu-icon>
      打印
    </mu-button>
    <mu-button color="primary"  @click="goback(-1)" flat>
      <mu-icon left value="exit_to_app"></mu-icon>
      返回
    </mu-button>
  </div>
</div>
</template>

<script>
import apiFeeHouseOrder from "@/pages/v1/pm/FeeHouseOrder/js/apiFeeHouseOrder";

export default {
  name:"v1-pm-FeeHouse-print",
  data() {
    return {
      order:null,
      // loading:false,
      id:this.$route.query.id*1,
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    getData(){
      apiFeeHouseOrder.findBy({
        _where:{
          id:this.id
        },
        _dumps:["bills","bills.house","bills.house.community","payType"]
      }, (res)=>{
        if (res.length > 0){
          this.order = res[0]
        }else {
          this.$toast.error("未找到数据")
        }

      })
    }
  }

}
</script>

<style scoped>

</style>